<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Content</title>
    <style></style>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react Dom库 用于支持 react操作dom-->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel 用于将 jsx 转为 js -->
    <script src="../js/babel.min.js"></script>

    <!-- 使用babel 转译jsx -->
    <script type="text/babel">
      // 一种组件间通信方式，常用于 祖组件 与 后代组件间通信
      const MyNameContext = React.createContext();
      const { Provider, Consumer } = MyNameContext;
      class A extends React.Component {
        state = { username: "tom" };
        render() {
          const { username } = this.state;
          return (
            <div>
              <div>我是A组件</div>
              <div>我的名字是：{username}</div>
              <Provider value={username}>
                <B />
              </Provider>
            </div>
          );
        }
      }
      class B extends React.Component {
        render() {
          return (
            <div>
              <div>我是B组件</div>
              <div>我是从A组件接收到的用户名：</div>
              <C />
            </div>
          );
        }
      }
      class C extends React.Component {
        // 声明接收 context 声明了才可以接收
        static contextType = MyNameContext;
        render() {
          console.log(this.context);
          return (
            <div>
              <div>我是C组件</div>
              <div>我是从B组件接收到的用户名：{this.context}</div>
            </div>
          );
        }
      }

      function C() {
        return (
          <div>
            <div>我是C组件</div>
            <div>
              我是从B组件接收到的用户名：
              <Consumer>
                {(value) => {
                  // 函数式组件这里可以拿
                  return value.name;
                }}
              </Consumer>
            </div>
          </div>
        );
      }
      ReactDOM.render(<A />, document.getElementById("test"));
    </script>
  </body>
</html>
